<template>
    <div class="box">
        <van-grid class="djs" :column-num="2">
            <van-grid-item text="京东秒杀">
            </van-grid-item>
            <van-grid-item class="smBox">
                <CountDown :time="time" @finish="onFinish" ref="countDown">
                    <template #default="timeData">
                        <span class="block">{{ timeData.hours }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.minutes }}</span>
                        <span class="colon">:</span>
                        <span class="block">{{ timeData.seconds }}</span>
                    </template>
                </CountDown>
            </van-grid-item>

        </van-grid>
        <van-grid square :border="false" :column-num="4">
            <van-grid-item v-for="item, index in items" :key="index">
                <img :src="item.img1" />
            </van-grid-item>
        </van-grid>
    </div>
</template>

<script setup lang="ts">
import { CountDown } from 'vant';
import { ref, onMounted } from 'vue';
import { shangPinMiaoSha } from "../api/index";

const time = ref(100 * 1000);
const items = ref()
const num = ref(1)
const countDown = ref();

const mioaSha = async () => {
    const res = await shangPinMiaoSha(num.value, 4)
    if (res.data.data.length == 0) {
        num.value = 1
        mioaSha()
    } else {
        items.value = res.data.data
        num.value++
    }
}

onMounted(() => {
    mioaSha()
})
const onFinish = () => {
    countDown.value.reset();
    mioaSha()
}
</script>

<style scoped>
img {
   width: 100%;
   height: 130%;
    object-fit: cover
}

.box {
    margin-bottom: 5px;
    margin-top: 10px;
    background: rgb(255, 255, 255);
}

.smBox {
    padding: 0;
}

.van-hairline {
    padding: 0;
}

.djs {
    justify-content: space-between
}

.colon {
    display: inline-block;
    margin: 0 4px;
    color: #1989fa;
}

.block {
    display: inline-block;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #1989fa;
}
</style>





